<template>
  <nut-popup v-model:visible="modelValue" pop-class="dialog-box">
    <view class="dialog">
      <text class="hint">{{hint}}</text>
      <view class="handle">
        <view class="cancel" @click="handleCancel">{{cancelText}}</view>
        <view class="sure" @click="handleSure">{{sureText}}</view>
      </view>
    </view>
  </nut-popup>
</template>
<script lang="ts">
export default {
  name: "yh-dialog",
  props: {
    modelValue: {
      default: false,
    },
    hint:{
      default:''
    },
    cancelText:{
      default:'取消'
    },
    sureText:{
      default:'确认'
    },
    handleCancel: {
      default: function () {},
    },
    handleSure: {
      default: function () {},
    },
  },
};
</script>
<style lang="scss">
 .dialog-box {
    width: calc(100% - 72px);
    border-radius: 4px;
    .dialog {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .hint {
        font-size: 18px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: center;
        color: #262626;
        padding: 40px 0;
      }
      .handle {
        width: 100%;
        display: flex;
        flex-direction: row;
        border-top: 1px solid #eeeeee;
        .cancel {
          flex: 1;
          font-size: 16px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: center;
          color: #333333;
          line-height: 20px;
          padding: 16px 0;
        }
        .sure {
          flex: 1;
          font-size: 16px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: center;
          color: #dc2734;
          line-height: 20px;
          border-left: 1px solid #eeeeee;
          padding: 16px 0;
        }
      }
    }
  }
</style>
